<template>
    <div id="ppt" class="fluid-container ppt">        
        <div class="row">
            <div class="col-md-12">
                <el-card class="box-card">
                    <div class="col-md-12" style="padding-bottom: 10px;">
                        <div class="row blue">    
                            <div class="col-md-1">
                                <span style="font-size: 45px;">{{session.SessionName}}</span>
                            </div>
                            <div class="col-md-11">
                                <div class="col-md-12">
                                    <div class="row blue">
                                        <div class="col-md-3"><span>{{session.ComputeEventName}} ({{session.ComputeGroupName}})</span></div>
                                        <div class="col-md-2"><span>{{words.types[session.SessionType]}}</span></div>
                                        <div class="col-md-3"><span>{{session.SessionRoomName}}</span></div>
                                        <div class="col-md-3"><span>{{session.SessionTime0|time}} ～ {{session.SessionTime1|time1}}</span></div>
                                    </div>
                                    <div class="row blue">
                                        <div class="col-md-3"><span>{{session.ComputeEventNameEn}} ({{session.ComputeGroupNameEn}})</span></div>
                                        <div class="col-md-2"><span>{{words.typesEn[session.SessionType]}}</span></div>
                                        <div class="col-md-3"><span>{{session.SessionRoomNameEn}}</span></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-card>
                <div class="row">
                    <div class="col-md-5">
                        <el-card id="count_down" class="box-card" style="height: 394px;">
                            <div slot="header" class="clearfix">
                                <span class="blue">演奏时间 (Play Time)</span>
                                <el-button style="float: right; font-size: 10px;" type="primary" round @click="countDown()">{{buttonTitle}}</el-button>
                            </div>
                            <div class="text item blue" style="text-align: center; margin-top: 20px; padding-bottom: 50px;">
                                <span style="font-size: 120px;">{{clock}}</span>
                            </div>
                            <div class="setting" v-if="timer==null">
                                <el-select v-model="minute" placeholder="请选择比赛时间" @change="setMinute()">
                                    <el-option v-for="item in [1,2,3,4,5,6,7,8,9]" :key="item" :label="item + '分钟'" :value="item"></el-option>
                                </el-select>
                            </div>                            
                        </el-card>
                    </div>
                    <div class="col-md-7">
                        <div class="row">
                            <div class="col-md-12">
                                <el-card id="competitor" class="box-card" v-if="next!=null">
                                    <div slot="header" class="clearfix blue">
                                        <span>参赛人信息 (Competitor Info)</span>                                
                                    </div>
                                    <table class="blue">
                                        <tr style="height: 30px;">
                                            <td style="width: 350px;">参赛序号 (No.)</td>
                                            <td>{{next.SerialNo}}</td>
                                        </tr>
                                        <tr style="height: 30px;" v-if="isSolo">
                                            <td>名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称 (Name)</td>
                                            <td>{{next.Compete.Passport.User.Name}} ({{next.Compete.PassportNo}})</td>
                                        </tr>
                                        <tr style="height: 30px;" v-if="isSolo">
                                            <td>国家地区 (Country/Area)</td>
                                            <td>{{next.Compete.Passport.User | country}}</td>
                                        </tr>
                                        <tr style="height: 30px;" v-if="!isSolo">
                                            <td>团队名称 (Team Name)</td>
                                            <td>{{next.Compete.Team.Name}} ({{next.Compete.PassportNo}})</td>
                                        </tr>
                                        <tr style="height: 30px;" v-if="!isSolo">
                                            <td>国家地区 (Location)</td>
                                            <td>{{next.Compete.Team.Leader.User | country}}</td>
                                        </tr>                                        
                                        <tr style="height: 30px;">
                                            <td>演出曲目 (Music)</td>
                                            <td>{{next.Compete.MusicName}}</td>
                                        </tr>
                                    </table>
                                </el-card>
                            </div>
                        </div>    
                        <div class="row">
                            <div class="col-md-12">
                                <el-card id="prepair" class="box-card" style="height: 128px;">
                                    <span class="blue" style="font-size: 25px;" v-if="next2!=null && isSolo2">
                                        请{{next2.SerialNo}}号参赛者{{next2.Compete.Passport.User.Name}} ({{next2.Compete.PassportNo}})做好准备。
                                        <br>
                                        No.{{next2.SerialNo}} {{next2.Compete.Passport.User.Name}} ({{next2.Compete.PassportNo}}) please be prepared.
                                    </span>
                                    <span class="blue" style="font-size: 25px;" v-if="next2!=null && !isSolo2">
                                        请{{next2.SerialNo}}号参赛者{{next2.Compete.Team.Name}} ({{next2.Compete.PassportNo}})做好准备。
                                        <br>
                                        No.{{next2.SerialNo}} {{next2.Compete.Team.Name}} ({{next2.Compete.PassportNo}}) please be prepared.
                                    </span>
                                </el-card>
                            </div>
                        </div>                                           
                    </div>
                </div>               
                <div class="row">
                    <div class="col-md-12">
                        <el-card class="box-card blue">                            
                            <el-table id="juryTable" :data="[session]" border style="width: 100%">
                                <el-table-column align="center" prop="Jury0" label="评委组长 Leader"></el-table-column>
                                <el-table-column align="center" prop="Jury1" label="评委二 Judge2"></el-table-column>
                                <el-table-column align="center" prop="Jury2" label="评委三 Judge3"></el-table-column>
                                <el-table-column align="center" prop="Jury3" label="评委四 Judge4"></el-table-column>
                                <el-table-column align="center" prop="Jury4" label="评委五 Judge5"></el-table-column>
                                <el-table-column align="center" prop="Jury5" label="评委六 Judge6"></el-table-column>
                                <el-table-column align="center" prop="Jury6" label="评委七 Judge7"></el-table-column>
                            </el-table>
                        </el-card>
                    </div>
                </div>
                <div id="competeTable" class="row">
                    <div class="col-md-12">
                        <el-card class="box-card blue">
                            <div slot="header" class="clearfix">
                                <span>参赛人列表 (Competitors)</span>
                                <el-button style="float: right;" type="primary" v-if="session.SessionCompetes.length > 0" round @click="nextCompete()">下一位参赛者</el-button>
                                <el-button style="float: right; margin-right: 10px;" type="primary" v-if="session.SessionCompetes.length > 0" round @click="prevCompete()">上一位参赛者</el-button>
                            </div>
                            <ppt-compete-list ref="competeList" :data="session" @currentCompeteChanged="currentCompeteChanged"></ppt-compete-list>
                        </el-card>
                    </div>
                </div>              
            </div>
        </div>                        
    </div>
</template>

<script>

import "babel-polyfill";
import 'jquery-slimscroll/jquery.slimscroll.min.js';
import moment from 'moment/src/moment.js';
import PptCompeteList from './ppt_compete_list.vue';
import {CountryFormat, TimeFormat, TimeFormat1} from 'web/utils';

export default {
    components: {
        PptCompeteList
    },
    filters: {
        time: TimeFormat,
        time1: TimeFormat1,
        country: CountryFormat
    },    
    data() {
        return {
            clock: '00分00秒',
            buttonTitle: '开始计时',
            buttonState: 0,
            timer: null,
            minute: 2,
            session: {
                Room: {},
                CompeteEvent: '',
                SessionCompetes: []
            },
            curIndex: -1,
            next: null,
            isSolo: true,
            next2: null,
            isSolo2: true,
            words: {
                types: {
                   'PRELIMINARY': '初赛',
                   'REMATCH': '复赛',
                   'FINALS': '决赛'
                },
                typesEn: {
                   'PRELIMINARY': 'Preliminary',
                   'REMATCH': 'Rematch',
                   'FINALS': 'Final'
                }
            }
        }
    },    
    mounted() {    
        this.$SessionService.GetSessionById(this.$route.params.id)
            .then(async ret => {
                if(ret) {
                    // 加载比赛项目词语
                    let eventWord = await this.$DataService.GetWordByCode(ret.CompeteEvent);
                    ret.ComputeEventName = eventWord.WordName;
                    ret.ComputeEventNameEn = eventWord.WordValue;

                    // 加载比赛分组词语
                    let groupWord = await this.$DataService.GetWordByCode(ret.CompeteGroup);
                    ret.ComputeGroupName = groupWord.WordName;                    
                    ret.ComputeGroupNameEn = groupWord.WordValue;
                    
                    // 比赛场地拆分中英文
                    ret.SessionRoomName = ret.SessionRoom.split("|")[0];
                    ret.SessionRoomNameEn = ret.SessionRoom.split("|")[1];

                    ret.SessionCompetes.sort((a, b) => {
                        return Math.sign(a.SortIndex - b.SortIndex);
                    });                    
                    this.session = ret;

                    // 处理SortIndex不是从1开始的问题
                    let index = 1;
                    for(var compete of ret.SessionCompetes) {
                        compete.SerialNo = compete.SortIndex;
                        compete.SortIndex = index;
                        index += 1;
                    }

                    const me = this;
                    setTimeout(function () {
                        // 默认加载第一位参赛者
                        me.nextCompete();
                    }, 500);
                }
            }); 
    },  
    methods: {

        setMinute() {
            this.buttonTitle = '开始计时';
            this.buttonState = 0;
            if (this.timer) clearInterval(this.timer);
            this.resetTime();
        },

        countDown() {
            if (this.buttonState == 0) {
                // 启动定时器
                let time = this.resetTime();
                this.buttonTitle = '停止计时';
                this.buttonState = 1;
                let me = this;
                this.timer = setInterval(function() {
                    time.subtract(1, 'seconds');
                    me.clock = time.format('mm:ss');
                    if(me.clock == '00:00') {
                        this.buttonTitle = '下一位参赛者';
                        this.buttonState = 2;                        
                        clearInterval(me.timer);
                        me.timer = null;
                    }
                }, 1000);
            } else if (this.buttonState == 1) {
                // 停止定时器
                this.buttonTitle = '下一位参赛者';
                this.buttonState = 2;
                clearInterval(this.timer);
                this.timer = null;
            } else if (this.buttonState == 2) {
                // 下一位参赛者
                this.buttonTitle = '开始计时';
                this.buttonState = 0;
                this.nextCompete();               
            }
        },

        prevCompete() {
            if (this.curIndex - 1 < 0) { this.curIndex = 0; } 
            else { this.curIndex -= 1; }
            this.refresh();
        },

        nextCompete() {
            const max = this.session.SessionCompetes.length;
            if (this.curIndex + 1 > max) { this.curIndex = max-1; } 
            else { this.curIndex += 1; }
            this.refresh();
        },

        currentCompeteChanged(index) {
            this.curIndex = index;
            this.refresh();
        },

        refresh() {
            this.next = this.session.SessionCompetes[this.curIndex];
            this.isSolo = this.next.Compete.Passport != null;
            this.$refs.competeList.selectRow(this.curIndex);
            this.next2 = null;
            if (this.curIndex < this.session.SessionCompetes.length) {
                this.next2 = this.session.SessionCompetes[this.curIndex+1];            
                this.isSolo2 = this.next2.Compete.Passport != null;
            }
            this.setMinute();           
        },

        resetTime() {
            let time = moment('1900-01-01 00:0'+this.minute+':00');
            this.clock = time.format('mm:ss');
            return time;
        }
    }
}
</script>

<style>

.center {
	width: 960px;
	margin-left: auto;
	margin-right: auto;
}

.box-card {
    margin-top: 10px;
}

.ppt {
    margin: 20px;    
    margin-top: 5px;
}

.ppt .el-table__body-wrapper {
    overflow-x: hidden;
}

.ppt span, .ppt th, .ppt td {
    font-size: 25px;
    font-weight: bolder;
}

.setting {
    margin-top: 10px;
    opacity: 0;    
}

.setting:hover {
    opacity: 1;
}

.ppt .blue {
    color: darkblue;
}

#prepair .el-card__body {
    position: relative;
    top: 50%;
    transform: translateY(-50%);    
}
</style>